<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Spirit8</title>
    <link rel="stylesheet" href="./assets/css/animate.min.css" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/header.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/footer.css" />

</head>
<body>
    <!-- 最外层 -->
    <div class="wraper">
        <div class="headbox">
            <!-- 视频背景 -->
            <div id="background" autoplay muted loop>
                <img src="./assets/images/fsf56.gif"/>
            </div>

            <!-- 头部 -->
            <header class="header">
                <div class="container">
                    <div class="box">
                        <div class="logo wow fadeInLeft">Spirit8</div>
                        
                        <input type="checkbox" id="mobi" hidden />
                        <label for="mobi" class="mobi">
                            <span></span>
                            <span></span>
                            <span></span>
                        </label>
    
                        <nav class="nav wow fadeInRight">
                            <a href="#banner">HOME</a>
                            <a href="#about">About</a>
                            <a href="#team">SERVICES</a>
                            <a href="#work">portfolio</a>
                            <a href="#footer">testimonials</a>
                            <a href="#contact">CONTACT</a>
                        </nav>
                    </div>
                </div>
            </header>

            <!-- banner -->
            <div id="banner" class="banner">
                <div class="container">
                    <h3 class="title wow fadeInUp" data-wow-delay="100ms">wELCOME on <span>spirit8</span></h3>
                    <p class="desc wow fadeInUp" data-wow-delay="200ms">We are a digital agency with years of experience and with extraordinary people</p>
                    <div class="down wow fadeInUp" data-wow-delay="300ms">
                        <a href="#footer">↓</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关于我们 -->
        <div class="about" id="about">
            <div class="container">
                <div class="box">
                    <div class="left">
                        <img class="wow fadeInLeft" data-wow-delay="100ms" src="./assets/images/aboutimg.jpg" />
                    </div>
                    <div class="right">
                        <div class="title">
                            <div class="short wow fadeInUp" data-wow-delay="100ms">About us</div>
                            <div class="long wow fadeInUp" data-wow-delay="150ms">
                                <span>Some</span> words <span>about us</span>
                            </div>
                        </div>

                        <p class="desc wow fadeInUp" data-wow-delay="200ms">
                            We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.
                        </p>

                        <ul class="list">
                            <li class="wow fadeInUp" data-wow-delay="210ms"><span>Mission - </span>We deliver uniqueness and quality</li>
                            <li class="wow fadeInUp" data-wow-delay="220ms"><span>Mission - </span>We deliver uniqueness and quality</li>
                            <li class="wow fadeInUp" data-wow-delay="230ms"><span>Mission - </span>We deliver uniqueness and quality</li>
                        </ul>

                        <div class="btn wow fadeInUp" data-wow-delay="250ms">
                            <a href="javascript:void(0)">Browse our work</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- team 团队合作 -->
        <div class="team" id="team">
            <div class="container">
                <div class="teambox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">Meet our team</div>

                    <div class="list" id="aaa1">
                        <div class="item wow fadeInUp" data-wow-delay="200ms">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                            </div>
                            
                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="250ms">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="300ms">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="350ms">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
           
                    </div>

                    <div class="list" id="aaa2">
                        <div class="item" data-wow-delay="200ms">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                            </div>
                            
                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
           
                    </div>

                    <div class="list" id="aaa3"> 
                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                            </div>
                            
                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="img">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Jason Statham</div>
                                    <div class="small">Knife designer</div>
                                </div>

                                <div class="desc">
                                    Do not seek to change what has come before. Seek to create that which has not.
                                </div>
                            </div>
                        </div>
           
                    </div>

                    <div class="more wow fadeInUp" data-wow-delay="400ms">
                        <span id="qqq1"></span>
                        <span id="qqq2"></span>
                        <span id="qqq3"></span>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var aaa1=document.getElementById("aaa1");
            var aaa2=document.getElementById("aaa2");
            var aaa3=document.getElementById("aaa3");
            var qqq1=document.getElementById("qqq1");
            var qqq2=document.getElementById("qqq2");
            var qqq3=document.getElementById("qqq3");

            qqq2.onclick=function(){
                aaa1.style.display="none";
                aaa2.style.display="flex";
                aaa3.style.display="none";
            }
            qqq1.onclick=function(){
                aaa1.style.display="flex";
                aaa2.style.display="none";
                aaa3.style.display="none";
            }
            qqq3.onclick=function(){
                aaa1.style.display="none";
                aaa2.style.display="none";
                aaa3.style.display="flex";
            }

        </script>

            <!-- 白色背景 -->
            <div class="baise">
                <div class="container">
                    <div class="baisebox">
                        <div class="title wow fadeInUp" data-wow-delay="100ms">take a look at our work</div>
    
                        <div class="descs wow fadeInUp" data-wow-delay="200ms">
                            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                        </div>
    
                        <div class="list">
                            <div class="item wow fadeInUp" data-wow-delay="200ms">
                                <div class="img">
                                    <img src="./assets/images/ju_03.jpg" />
                                </div>
                                
                                <div class="content">
                                    <div class="name">
                                        <div class="big">Web design</div>
                                    </div>
    
                                    <div class="desc">
                                       The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                    </div>
                                </div>
                            </div>
    
                            <div class="item wow fadeInUp" data-wow-delay="250ms">
                                <div class="img">
                                 
                                    <img src="./assets/images/ju1_03.jpg" />
                                </div>
    
                                <div class="content">
                                    <div class="name">
                                        <div class="big">Mobile apps</div>
                                    </div>
    
                                    <div class="desc">
                                       The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                    </div>
                                </div>
                            </div>
    
                            <div class="item wow fadeInUp" data-wow-delay="300ms">
                                <div class="img">
                                    <img src="./assets/images/ju2_03.jpg" />
                                </div>
    
                                <div class="content">
                                    <div class="name">
                                        <div class="big">PHOTOGRAPHY</div>
                                    </div>
    
                                    <div class="desc">
                                       The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                    </div>
                                </div>
                            </div>
    
                            <div class="item wow fadeInUp" data-wow-delay="350ms">
                                <div class="img">
                                    <img src="./assets/images/ju3_03.jpg" />
                                </div>
    
                                <div class="content">
                                    <div class="name">
                                        <div class="big">marketing</div>
                                    </div>
    
                                    <div class="desc">
                                       The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                    </div>
                                </div>
                            </div>
                        </div>





                    </div>
                 </div>
            </div>

        <!-- 客户端1 -->
        <div class="client1">
                <div class="container">
                    <div class="clientbox">
                        <div class="title wow fadeInUp" data-wow-delay="100ms">SOME OF OUR CLIENTS</div>
                        <div class="desc wow fadeInUp" data-wow-delay="200ms" id="ul">
                            <img src="./assets/images/wenzi_03.jpg">
                        </div>
                        <div class="desc"id="ul2">
                            <img src="./assets/images/1.jpg">
                        </div>
                        <div class="desc" id="ul3" >
                            <img src="./assets/images/2.jpg">
                        </div>
                        <div class="more wow fadeInUp" data-wow-delay="400ms">
                            <span id="wwww1"></span>
                            <span id="wwww2"></span>
                            <span id="wwww3"></span>
                        </div>
    
                    </div>
                </div>
        </div>
        <script>
            var ull1=document.getElementById("ul");
            var ull2=document.getElementById("ul2");
            var ull3=document.getElementById("ul3");
            var www1=document.getElementById("wwww1");
            var www2=document.getElementById("wwww2");
            var www3=document.getElementById("wwww3");

            www2.onclick=function(){
                ull1.style.display="none";
                ull2.style.display="block";
                ull3.style.display="none";
            }
            www1.onclick=function(){
                ull1.style.display="block";
                ull2.style.display="none";
                ull3.style.display="none";
            }
            www3.onclick=function(){
                ull1.style.display="none";
                ull2.style.display="none";
                ull3.style.display="block";
            }

        </script>
        <!-- work -->
        <div class="work" id="work">
            <div class="container">
                <div class="workbox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">take a look at our work</div>

                    <div class="desc wow fadeInUp" data-wow-delay="200ms">
                        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>

                    <div class="worklist">
                        <div class="nav">
                            <div class="left wow fadeInUp" data-wow-delay="300ms">Filter by type</div>
                            <div class="right wow fadeInUp" data-wow-delay="300ms">
                                <nav class="typelist">
                                    <span  id="sb1">all</span>
                                    <span  id="sb2">web design</span>
                                    <span  id="sb3">mobile design</span>
                                    <span  id="sb4">hotograpy</span>
                                </nav>
                            </div>
                        </div>

                        <div class="list" id="re1">
                            <div class="item wow fadeInUp" data-wow-delay="350ms">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="360ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="370ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="380ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="390ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="400ms">
                                <img src="./assets/images/pc_img_list_202010091115319718.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="410ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="420ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="430ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="440ms">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="450ms">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="460ms">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                        </div>

                        <div class="list" id="re2">
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" >
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202008051713557826.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" >
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" >
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" >
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171757465198.jpg" >
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item" data-wow-delay="460ms">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                        </div>

                        <div class="list" id="re3">
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                        </div>

                        <div class="list" id="re4">
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006111742141728.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202006171756153126.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./assets/images/pc_img_list_202011131737361629.jpg" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <script>
            var re1=document.getElementById("re1");
            var re2=document.getElementById("re2");
            var re3=document.getElementById("re3");    
            var re4=document.getElementById("re4");
            var sb1=document.getElementById("sb1");
            var sb2=document.getElementById("sb2");
            var sb3=document.getElementById("sb3");
            var sb4=document.getElementById("sb4");

            sb2.onclick=function(){
                re1.style.display="none";
                re2.style.display="flex";
                re3.style.display="none";
                re4.style.display="none";
            }
            sb1.onclick=function(){
                re1.style.display="flex";
                re2.style.display="none";
                re3.style.display="none";
                re4.style.display="none";
            }
            sb4.onclick=function(){
                re1.style.display="none";
                re2.style.display="none";
                re3.style.display="none";
                re4.style.display="flex";
            }
            sb3.onclick=function(){
                re1.style.display="none";
                re2.style.display="none";
                re3.style.display="flex";
                re4.style.display="none";
            }

        </script>


        

        <!-- 客户端2 -->
        <div class="client2">
            <div class="container2">
                <div class="clientbox2">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">our clients’ testimonials</div>
                    <div class="desc wow fadeInUp" data-wow-delay="200ms" id="toot1">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                       <p>Dean Martin, CEO Acme Inc.</p>
                    </div> 
                    <div class="desc" id="toot2">
                        Ghosts cry
                       <p>鬼泣</p>
                    </div>
                    <div class="desc"  id="toot3">
                        Ghosts cry
                       <p>鬼泣</p>
                    </div>
                    <div class="more wow fadeInUp" data-wow-delay="400ms">
                        <span id="mml1"></span>
                        <span id="mml2"></span>
                        <span id="mml3"></span>
                    </div>
                </div> 
                    

                </div>
            </div>
        </div>
        <script>
            var ttt1=document.getElementById("toot1");
            var ttt2=document.getElementById("toot2");
            var ttt3=document.getElementById("toot3");
            var Span1=document.getElementById("mml1");
            var Span2=document.getElementById("mml2");
            var Span3=document.getElementById("mml3");

            Span2.onclick=function(){
                ttt1.style.display="none";
                ttt2.style.display="block";
                ttt3.style.display="none";
            }
            Span1.onclick=function(){
                ttt1.style.display="block";
                ttt2.style.display="none";
                ttt3.style.display="none";
            }
            Span3.onclick=function(){
                ttt1.style.display="none";
                ttt2.style.display="none";
                ttt3.style.display="block";
            }

        </script>

        <!-- contact 联系我们 -->
        <div class="contact" id="contact">
            <div class="container">
                <div class="contactbox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">feel free to contact us</div>

                    <div class="desc wow fadeInUp" data-wow-delay="150ms">
                        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>

                    <div class="contact-form">
                        <div class="info">
                            <div class="left wow fadeInUp" data-wow-delay="200ms">
                                <div class="formtitle">Name<sup>*</sup></div>
                                <div class="input"><input type="text" name="username" /></div>
                            </div>

                            <div class="right wow fadeInUp" data-wow-delay="200ms">
                                <div class="formtitle">Emall Address<sup>*</sup></div>
                                <div class="input"><input type="text" name="email" /></div>
                            </div>
                        </div>

                        <div class="message wow fadeInUp" data-wow-delay="250ms">
                            <div class="formtitle">
                                Message<sup>*</sup>
                            </div>
                            <div class="textarea">
                                <textarea></textarea>
                            </div>
                        </div>

                        <div class="submit wow fadeInUp">
                            <button class="btn">SEND</button>
                        </div>
                    </div>




                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div id="footer" class="footer">
            <div class="container">
                <div class="footerbox">
                    <div class="copyright wow fadeInUp" data-wow-delay="200ms">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></div>
                    <div class="iconlist wow fadeInUp" data-wow-delay="200ms">
                        <div class="img">
                            <img src="./assets/images/icons.png" />
                        </div>
                        <div class="img">
                            <img src="./assets/images/icons.png" />
                        </div>
                        <div class="img">
                            <img src="./assets/images/icons.png" />
                        </div>
                        <div class="img">
                            <img src="./assets/images/icons.png" />
                        </div>
                        <div class="img">
                            <img src="./assets/images/icons.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>





    </div>
</body>
</html>
<script src="./assets/js/wow.min.repeat.js"></script>
<script>
    var background = document.getElementById("background");

    //将视频速度调整
    // background.playbackRate = 0.5;

    //实例化懒加载插件
    new WOW().init();
</script>